<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <div>
          <span class="search-label" style="margin-left: 5px">搜索字段:</span>
          <el-input v-model="search.name" style="width: 200px" placeholder="请输入字段"></el-input>
          <el-button class="query_btn" type="primary" @click="handleSearch">查询</el-button>
        </div>
        <div>
          <el-button class="add_btn" type="primary" @click="handleAdd">添加</el-button>
          <el-button class="export_btn" type="primary" @click="handleAdd">导出</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        class="table"
        border
        v-loading="loadingTable"
        element-loading-text="列表数据加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255,255, 255, .8)"
      >
        <el-table-column prop="name" label="序号" />
        <el-table-column prop="name" label="头像" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="name" label="性别" />
        <el-table-column prop="name" label="职位" />
        <el-table-column prop="name" label="手机号码" />
        <el-table-column prop="name" label="出生日期" />
        <el-table-column prop="name" label="民族" />
        <el-table-column prop="name" label="籍贯" />
        <el-table-column prop="name" label="入职日期" />
        <el-table-column label="操作" width="200">
          <template #default="{row}">
            <el-button type="text" icon="el-icon-edit-outline" @click="handleEdit(row.name)">修改</el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDel(row.name1)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :current-page="currentPage"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="totalNum"
          :page-size="pageSize"
        ></el-pagination>
      </div>
      <!-- 添加弹框 -->
      <el-drawer title="添加" :visible.sync="visibleAdd" @close="closeDialog('add')">
        <div class="drawer-box">
          <el-form :model="addForm" ref="addForm" label-width="60px" :rules="rules">
            <el-form-item label="测试" prop="name">
              <el-input v-model="addForm.name" placeholder="请输入测试"></el-input>
            </el-form-item>
            <el-form-item label="测试1" prop="name1">
              <el-input v-model="addForm.name1" placeholder="请输入测试1"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span class="footer">
          <el-button @click="closeDialog('add')">取 消</el-button>
          <el-button type="primary" @click="addBtn">确 定</el-button>
        </span>
      </el-drawer>
      <!-- 修改弹框 -->
      <el-drawer title="修改" :visible.sync="visibleEdit" width="400px" @close="closeDialog('edit')">
        <div class="drawer-box">
          <el-form :model="editForm" ref="editForm" label-width="60px" :rules="rules">
            <el-form-item label="测试" prop="name">
              <el-input v-model="editForm.name" placeholder="请输入测试"></el-input>
            </el-form-item>
            <el-form-item label="测试1" prop="name1">
              <el-input v-model="editForm.name1" placeholder="请输入测试1"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span class="footer">
          <el-button @click="closeDialog('edit')">取 消</el-button>
          <el-button type="primary" @click="editBtn">确 定</el-button>
        </span>
      </el-drawer>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { getOrgInfo } from "../../api/orgAPI/api";
export default {
  name: "demo",
  data() {
    return {
      //列表参数
      tableData: [{ name: "测试", name1: "测试1" }],
      currentPage: 1,
      pageSize: 10,
      totalNum: 0,
      loadingTable: false,
      visibleAdd: false,
      visibleEdit: false,
      //搜索
      search: {
        name: "",
      },
      //添加
      addForm: {
        name: "",
        name1: "",
      },
      //修改
      editForm: {
        name: "",
        name1: "",
      },
      //验证必选规则
      rules: {
        name1: [{ required: true, message: "请输入测试1", trigger: "blur" }],
      },
    };
  },
  mounted() {
    //获取id
    this.getData();
    let params = {
      id:"userid"
    }
    getOrgInfo(params).then((res)=>{
      console.log(res)
    })
  },
  methods: {
    //搜索
    handleSearch() {
      this.currentPage = 1;
      this.getData();
    },
    // 分页导航
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadingTable = true;
      this.getData();
    },
    // 获取列表数据
    getData() {
      this.loadingTable = true;
      let params = {
        ...this.search,
      };
      //接口逻辑

      this.loadingTable = false;
    },
    // 添加弹出框
    handleAdd() {
      this.visibleAdd = true;
    },
    //修改弹出框
    handleEdit(e) {
      console.log(e);
      this.visibleEdit = true;
    },
    // 添加
    addBtn() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let params = {
            ...this.addForm,
          };
          //接口逻辑
          console.log(params);
        } else return false;
      });
    },
    // 修改
    editBtn() {
      this.$route.path({
        url:"/newIndex"
      })
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          let params = {
            ...this.editForm,
          };
          //接口逻辑
          console.log(params);
        } else return false;
      });
    },
    //删除
    handleDel(e) {
      //接口逻辑
      console.log(e);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //清除form数据
    closeDialog(i) {
      if (i == "add")
        (this.visibleAdd = false), this.$refs.addForm.resetFields();
      else if (i == "edit")
        (this.visibleEdit = false), this.$refs.editForm.resetFields();
    },
  },
};
</script>
